<template>
  <div>
    <el-card style="width: 100%">
      <div class="down">
        <span>配置列表({{ postList.length }})，</span>
        <a class="down-a" href="javascript:;" @click="handleDown">下载</a>
      </div>
      <div class="warppar">
        <div class="warppar-left">
          <el-table v-loading="loading" :data="postList">
            <el-table-column show-overflow-tooltip label="序号" type="index" width="50" align="center" />
            <el-table-column show-overflow-tooltip label="ID" min-width="140" align="center" prop="id" />
            <el-table-column show-overflow-tooltip label="类型" min-width="100" align="center" prop="type" />
            <el-table-column show-overflow-tooltip label="名称" min-width="100" align="center" prop="name" />
            <el-table-column show-overflow-tooltip label="创建时间" min-width="150" align="center" prop="createTime">
              <template slot-scope="scope">
                {{ scope.row.createTime | YYYY_MM_DD }}
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="修改时间" min-width="150" align="center" prop="updateTime">
              <template slot-scope="scope">
                {{ scope.row.updateTime | YYYY_MM_DD }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="warppar-right">
          <el-upload class="upload-demo" drag ref="el-upload" action="#" :show-file-list="true" :auto-upload="false"
            :http-request="handleUpload" accept=".json" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <div class="el-upload__tip" slot="tip">
                <h1 style="display: inline-block">上传配置</h1>
                <h3 style="display: inline-block; margin-left: 8px">
                  只支持 "json" 的文件扩展名.

                  <el-button size="small" @click="handleClickUpload" type="primary">立即上传</el-button>
                </h3>
              </div>
            </div>
          </el-upload>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listConfig, uploadConfig } from "@/api/setting/allocation";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 岗位表格数据
      postList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询岗位列表 */
    async getList() {
      try {
        this.loading = true;
        let res1 = await listConfig();
        this.postList = res1.resultValue.config;
        this.loading = false;
      } catch (e) {
        this.loading = false;
      }
    },
    /** 下载 */
    async handleDown() {
      window.open(process.env.VUE_APP_BASE_API + "/config/download");
    },
    handleClickUpload() {
      this.$refs['el-upload'].submit();
      // setTimeout(() => {
      //   this.$refs['el-upload'].clearFiles();
      // }, 2000);
    },
    /** 上传文件 */
    handleUpload(options) {
      console.log(options);
      let formdata = new FormData();
      formdata.append('files', options.file);
      formdata.append('fileId', options.file.name);
      formdata.append('initialPreview', '[]');
      formdata.append('initialPreviewConfig', '[]');
      formdata.append('initialPreviewThumbTags', '[]');
      return uploadConfig(formdata);
    }
  },
};
</script>
<style lang="scss" scoped>
.down {
  color: #666666;
  font-size: 16px;

  .down-a {
    cursor: pointer;
    color: #337ab7;
    text-decoration: none;
  }

  .down-a:hover {
    color: #23527c;
    text-decoration: underline;
  }
}

.warppar {
  display: flex;
  flex-wrap: wrap;

  .warppar-left {
    width: 60%;
    margin-bottom: 20px;
    margin-right: 20px;
  }
}

@media screen and (max-width: 1110px) {
  .warppar .warppar-left {
    width: 100%;
  }
}
</style>
